<template>
  <div v-drag>
    <div class="mask" @click="closePopup(false)"></div>
    <div class="edit_box" v-loading="loading">
      <div class="box_head">
        <p>{{bid?'修改':'新增'}}轮播图</p>
        <i @click="closePopup(false)"></i>
      </div>
      <div class="box_body" >
        <div class="line" :class="{'error_border':tip_num===1}">
          <span class="lab"><i class="mark_icon">*</i>名称：</span>
          <div>
            <el-input type="text" placeholder="请输入名称" v-model.trim="bName"
                      @input="setTip('','')"></el-input>
          </div>
        </div>
        <div class="line" >
          <span class="lab" ><i class="mark_icon">*</i>图片：</span>
          <div class="card_border"  :class="{'error_border':tip_num===2}">
            <el-upload
              :data="param"
              :action="uploadUrl"
              :show-file-list="false"
              :on-success="avatarSuccess"
              :before-upload="avatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar" :style="'border-color:'+(tip_num===2?'#e40000':' #DCDFE6')">
              <i class="el-icon-plus avatar-uploader-icon" v-else></i>
            </el-upload>
          </div>
        </div>
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>生效时间：</span>
          <div :class="{'error_border':tip_num===3}">
            <el-date-picker
              v-model="effectTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              default-time="00:00:00"
              type="datetime"
              :picker-options="pickerOptions"
              placeholder="选择日期时间">
            </el-date-picker>
          </div>
        </div>
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>排序：</span>
          <div :class="{'error_border':tip_num===4}">
            <el-input type="number" placeholder="请输入排序" v-model.trim="sort"
                      @input="setTip('','')" :min="1"></el-input>
          </div>
        </div>
        <div class="line">
          <span class="lab">远端地址：</span>
          <div>
            <el-input type="text" placeholder="请输入远端地址" v-model.trim="remoteUrl"
                      @input="setTip('','')"></el-input>
          </div>
        </div>
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>是否可用：</span>
          <div>
            <el-radio-group v-model="proStatus">
              <el-radio :label="1">可用</el-radio>
              <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
          </div>
        </div>

        <p class="error_line">{{infoTip}}</p>
      </div>
      <div class="box_foot">
        <span @click="closePopup(false)">取消</span>
        <span @click="confirmEdit">确定</span>
      </div>
    </div>
  </div>
</template>

<script>
import {addData, getDetail, updateData} from "@/api/config/banner";
import {restUrl} from "../../../../url";
import commons from "@/utils/common";

export default {
  props:['bid'],
  data(){
    return {
      param: {folder: 'water'},
      uploadUrl: restUrl + '/common/upload',
      location:0,
      effectTime:'',
      remoteUrl:'',
      bName:'',
      imageUrl:'',
      proStatus:1,
      sort:'',
      infoTip: '',
      tip_num: '',
      loading:false,
      pickerOptions:{
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的
        }
      },
    }
  },
  mounted() {
    if (this.bid){
      this.getDetail();
    }
  },
  methods:{
    getDetail(){
      let that = this;
      that.loading = true;
      getDetail(that.bid).then(res => {
        if (res){
          let obj = res;
          this.bName=obj.title?obj.title:'';
          this.imageUrl= obj.url?obj.url:'';
          this.remoteUrl = obj.remoteUrl?obj.remoteUrl:'';
          this.proStatus= obj.enable?obj.enable:0;
          this.effectTime = obj.effectTime?commons.formatTime(obj.effectTime) :'';
          this.sort = obj.sort?obj.sort:'';
        }
        that.loading = false;
      }).catch((e) => {
        that.loading = false;
      });
    },

// 上传图标
    avatarUpload(file) {
      this.setTip('', '');
      this.loading = true;
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$message.error({
          message:'上传图像大小不能超过 10MB!',
          duration:1500
        });
      }
      return isLt10M;
    },

    // 图标上传回调
    avatarSuccess(res, file) {
      if (file.response.success) {
        this.imageUrl = file.response.data;
        this.$message.success({
          message:'上传成功！',
          duration:1500
        });
      } else {
        this.$message.error({
          message:'上传失败，请重试',
          duration:1500
        });
      }
      this.loading = false;
    },

    // 确认编辑
    confirmEdit(){
      if (this.bName === '') {
        this.setTip(1, '请输入名称！');
      } else if (this.imageUrl===''){
        this.setTip(2, '请输入上传图片！');
      }else if (this.effectTime===''){
        this.setTip(3, '请选择有效期！');
      }else if (this.sort===''||this.sort===0||this.sort<0){
        this.setTip(4, '请输入正确的排序！');
      } else {
        this.sendInfo();
      }
    },

    sendInfo(){
      let that = this;
      that.loading = true;
      let data = {
        enable: that.proStatus,
        sort: that.sort,
        remoteUrl: that.remoteUrl,
        effectTime: that.effectTime,
        title: that.bName,
        url:that.imageUrl
      }
      if (that.bid) {
        data.id = that.bid;
        updateData(JSON.stringify(data)).then(response => {
          that.closePopup(true);
          that.$message.success({
            message:'操作成功！',
            duration:1500
          });
          that.loading = false;
        }).catch((e) => {
          that.loading = false;
        });
      } else {
        addData(JSON.stringify(data)).then(response => {
          that.closePopup(true);
          that.$message.success({
            message:'操作成功！',
            duration:1500
          });
          that.loading = false;
        }).catch((e) => {
          that.loading = false;
        });
      }
    },

    setTip(num,text){
      this.tip_num = num;
      this.infoTip = text
    },

    // 关闭
    closePopup(refresh){
      this.$emit('listenToChild', {refresh: refresh})
    }
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #60BAE7;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #DCDFE6;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid #DCDFE6;
  border-radius: 6px;
}

.avatar {
  max-width: 210px;
  min-width: 60px;
  height: 100px;
  display: block;
  border-radius: 6px;
  margin-right: 15px;
  border: 1px solid #bbb;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #60BAE7;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #DCDFE6;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid #DCDFE6;
  border-radius: 6px;
}

</style>
